<template>
  <div>
    <a-drawer
      mask="false"
      zIndex="999"
      height="auto"
      drawerStyle="filter: blur(20px);"
      :placement="placement"
      :closable="false"
      :visible="visible"
      @close="closeDrawer"
    >
      <search class="room-search" v-on:change="getBroadcastUrl" v-on:click-tag="getBroadcastUrl" />
    </a-drawer>
    <flv-player :url="url" :types="type" class="flv-video" />
    <!--遮罩层-->
    <div class="shadow" @mouseenter="showDrawer"></div>
  </div>
</template>

<script>
import FlvPlayer from "./FlvPlayer";
import Search from "./Search";
import axios from "axios";
import flvjs from "flv.js";
import wasm from "../wasm/wanode.js";

export default {
  name: "Broadcast",
  components: {
    FlvPlayer,
    Search
  },
  mounted() {},
  data() {
    return {
      url: null,
      type: "flv",
      visible: true,
      placement: "top",
    };
  },
  methods: {
    getBroadcastUrl(id) {
      let that = this;
      let prefix = "cdn=&rate=-1&ver=Douyu_220051305&iar=1&ive=0&";
      let did = "10000000000000000000000000001501";
      let t = new Date().getTime();
      let r = t.toString(16),
        i = parseInt("0x" + r.substring(0, r.length - 8), 16),
        o = parseInt("0x" + r.substring(r.length - 8, r.length), 16),
        n = "201806211659380f83e682207dd1293cea68f98662b1660083967948219fe20";
      let q = wasm.sqsneedalongname(id, i, o, did, n, 3186);
      let body = prefix + q + "&sov=1&tt=" + t + "&did=" + did;
      let getUrl = "https://www.douyu.com/lapi/live/getH5Play/" + id;
      axios.post(getUrl, body).then(response => {
        that.url =
          response.data.data.rtmp_url + "/" + response.data.data.rtmp_live;
      });
    },
    showDrawer() {
      this.visible = true;
    },
    closeDrawer() {
      this.visible = false;
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
<style scoped>
.shadow {
  width: 100%;
  height: 20%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
  opacity: 0;
}
.flv-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  left: 0;
  top: 0;
}
</style>